<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .c1{
            position: relative;
            display: inline-block;
            /* 鼠标悬停在这个元素上时，鼠标指针会变成一个手形图标： cursor: pointer;   */
            cursor: pointer;
        }
        .c1 .c2{
            /* 临时隐藏的元素 */
            visibility: hidden;
            width: 150px;
            height: 100px;
            background-color: lightblue;
            color: green;
            text-align: center;
            border-radius: 6px;  
            padding: 2px;
            position: absolute;  
            z-index: 1;  
            top:100%; /* 位置在文字下方，距离可以根据需要调整 */  
            left:100%;  
            margin-left: -180px; /* 提示框宽度的一半，用于水平居中 */  
            opacity: 0; /* 设置元素的不透明度。opacity 属性的值范围从 0 到 1|*/
            transition: opacity 0.3s;  
            /* 可以根据需要添加更多样式，如阴影、箭头等 */

        }
        .c1:hover .c2{
            /* 鼠标移过去去就显示 */
            visibility: visible;
            opacity: 1; /*不透明*/ 
        }
    </style>
</head>
<body>
    <div class="c1">
        别点开，收起你的好奇心
        <div class="c2">都说了别点开了，点开了我就是你爹</div>
    </div>
    
</body>
</html>